<template>
  <article class="page">
    <headerbar>请假旷课</headerbar>
    <section class="frame-content-sub no-bg">

      <section class="">
        <ul class="tab">
          <li @click="findPjOfGr()" :class="{'active':tableIndex===0}"><span>请假</span></li>
          <li @click="organizer()" :class="{'active':tableIndex===1}"><span>旷课</span></li>
        </ul>

        <section id="personal" class="list-wenda d-scroll mui-active" v-if="tableIndex === 0">
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <div v-for="item in list" class="item block">
                <div class="text-wrap">
                  <div class="title"><span>{{item.trainingclass}}</span> <span class="status color-tip"></span></div>
                  <div class="tip" v-if="item.curriculumName"><span class="one">课程名称：{{item.curriculumName}}</span></div>
                  <div class="tip" v-if="item.userName"><span class="one">姓名：{{item.userName}}</span></div>
                  <div class="tip" v-if="item.beginTime"><span class="one">开始时间：{{getTime(item.beginTime)}}</span></div>
                  <div class="tip" v-if="item.endTime"><span class="one">结束时间：{{getTime(item.endTime)}}</span></div>
                  <div class="tip" v-if="item.sftg==='0'"><span class="one">同意</span></div>
                  <div class="tip" v-if="item.sftg==='1'"><span class="one">不同意</span></div>
                  <div class="tip" v-if="item.spyj"><span class="one">审批意见：{{item.spyj}}</span></div>
                </div>
              </div>
              <div class="text-center no-data" v-if="list.length===0">
                <div class="pdv-5"></div>
                <div class="pdv-5"></div>
                <img src="../../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
              </div>

            </cube-scroll>
        </section>
        <section id="personals" class="list-wenda d-scroll mui-active" v-if="tableIndex === 1">
            <cube-scroll
              ref="scroll"
              :options="zbdwOptions"
              @pulling-up="zbdwPnPullingUp"
            >
              <div v-for="item in zbdwList" class="item block">
                <div class="text-wrap">
                  <div class="title"><span>{{item.trainingclass}}</span> <span class="status color-tip"></span></div>
                  <div class="tip" v-if="item.curriculumName"><span class="one">课程名称：{{item.curriculumName}}</span></div>
                  <div class="tip" v-if="item.userName"><span class="one">姓名：{{item.userName}}</span></div>
                  <div class="tip" v-if="item.beginTime"><span class="one">开始时间：{{getTime(item.beginTime)}}</span></div>
                  <div class="tip" v-if="item.endTime"><span class="one">结束时间：{{getTime(item.endTime)}}</span></div>
                </div>
              </div>
              <div class="text-center no-data" v-if="zbdwList.length===0">
                <div class="pdv-5"></div>
                <div class="pdv-5"></div>
                <img src="../../../../static/images/no_data.png" alt="">
                <p>暂无数据</p>
              </div>

            </cube-scroll>
        </section>

      </section>

    </section>
  </article>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'appraiseManage',
    data () {
      return {
        routeName: '1',
        pageIndex: 1,
        pageSize: 10,
        zbdwPageIndex: 1,
        zbdwPageSize: 10,
        list: [],
        zbdwList: [],
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        zbdwOptions: {
          pullUpLoad: true,
          scrollbar: false
        },
        tableIndex: 0
      }
    },
    created () {
      this.findPjOfGr()
    },
    methods: {
      clickNav (index) {
        if (this.$route.query.index !== index) {
          this.$router.replace({path: this.$route.name, query: {index: index}})
        }
        this.routeName = index
        this.pageIndex = 1
        this.list = []
        this[this.fetchNames[index]]()
      },
      detail (item) {
        this.$store.state.appraiseDetail = item
        this.$router.push({path: '/appraiseManageDetail', query: {id: item.id}})
      },
      findPjOfGr () {
        this.pageIndex = 1
        this.tableIndex = 0
        this.list = []
        let params = {
          'type': '0',
          'limit': this.pageSize,
          'page': this.pageIndex
        }
        return this.fetchService.trainingplanLeave(params).then(res => {
          console.log(res)
          if (res.code !== 0) {
            return this.tools.tip(res.message || '获取数据失败')
          }
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          this.list = this.list.concat(res.data)
          return res
        })
      },
      onPullingUp () {
        this.pageIndex ++
        this.findPjOfGr().then(res => {
          if (res.data.length === 0) {
            this.tools.tip('已无更多数据')
          }
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          })
        })
      },
      zbdwPnPullingUp () {
        this.zbdwPageIndex ++
        this.organizer().then(res => {
          if (res.data.length === 0) {
            this.tools.tip('已无更多数据')
          }
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          })
        })
      },
      organizer () {
        this.zbdwPageIndex = 1
        this.tableIndex = 1
        this.zbdwList = []
        let params = {
          'type': '1',
          'limit': this.pageSize,
          'page': this.pageIndex
        }
        return this.fetchService.trainingplanLeave(params).then(res => {
          console.log(res)
          if (res.code !== 0) {
            return this.tools.tip(res.message || '获取数据失败')
          }
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          this.zbdwList = this.zbdwList.concat(res.data)
          return res
        })
      },
      getTime (createTime) {
        return moment(createTime).format('YYYY年MM月DD日')
      }
    }
  }
</script>

<style scoped>

</style>
